<template>
  <div ref="wrapper" class="wrapper">

    <h1 class="title">{{title}}记录</h1>
    <div>
      <table align="center" cellpadding="0" cellspacing="0" class="table_head">
        <tr>
          <td align="center">班组编号</td>
          <td align="center">{{title}}计划</td>
          <td align="center">{{title}}达成量</td>
          <td align="center">{{title}}达成率</td>
        </tr>
      </table>
    </div>
    <div id="demo" ref="demo" style="overflow: hidden;">
      <div id="demo1" ref="demo1">
        <table
          border="0"
          align="center"
          cellpadding="0"
          cellspacing="0"
          bordercolor="4FBFF9"
          class="table_body"
        >
          <tr v-for="(item,index) in tableData">
            <td>{{item.name}}</td>
            <td>{{item.target}}</td>
            <td>{{item.complete}}</td>
            <td>{{item.difference}}%</td>
          </tr>
        </table>
      </div>
      <div id="demo2" ref="demo2">
        <table
          border="0"
          align="center"
          cellpadding="0"
          cellspacing="0"
          bordercolor="4FBFF9"
          class="table_body"
        >
          <tr v-for="(item,index) in tableData">
            <td>{{item.name}}</td>
            <td>{{item.target}}</td>
            <td>{{item.complete}}</td>
            <td>{{item.difference}}%</td>
          </tr>
        </table>  
      </div>
    </div>
  </div>
</template>

<script>
var speed = 100;
export default {
  props:{
    title: String,
    tableData: Array,
    desc: String
},  
  data() {
    return {
      timeOut: {},
      nextDate: 0,
      demo: null,
      demo1: null,
      demo2: null
    };
  },
  mounted() {
    let dom = this.$refs.wrapper;
    this.demo = this.$refs.demo
    this.demo1 = this.$refs.demo1
    this.demo2 = this.$refs.demo2
    
    this.timeOut = setInterval(() => {
      this.scroll();
    }, speed);
    window.onbeforeunload=(() => {
      　clearInterval(this.timeOut);
    })    
      
  },
  destroyed() {
    clearInterval(this.timeOut);
  },
  methods: {
    scroll() {
      if (this.nextDate === 0) {
        this.nextDate = new Date().getTime();
      }
      let date = new Date().getTime();
      if (date - this.nextDate >= speed) {
        let height = this.demo.scrollHeight - this.demo.offsetHeight
        if(height === this.demo.scrollTop){
          this.demo.scrollTop = 0
        }

        if (this.demo2.offsetTop - this.demo.scrollTop <= 0) {
          this.demo.scrollTop -= this.demo1.offsetHeight;
        } else {
          this.demo.scrollTop++;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  width: 23.5vw;
  height: 39.9  vh;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  .desc{
    margin-top:10px;
    text-align: center;
    font-size: 1.2em;
    color: #fff;
    line-height: 33px;
    font-weight: 600;
    margin-bottom: 28px;
    height: 13vh;
    p{
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-align: left;
      padding: 0px 10px; 
    }
  }
  h1 {
    text-align: center;
    font-size: 1.2em;
    color: #fff;
    line-height: 33px;
    font-weight: 600;
    margin-bottom: 28px;
  }
  .table_head {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: block;
    tr {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: rgba(255, 255, 255, 0.6);
      font-size: 1em;
      td {
        // padding-right: 10px;
        width: 25%;
      }
     
    }
  }
  #demo {
    height: 33vh;
  }
}

.table_body {
  display: inline;
  tr {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1em;
    line-height: 44px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    td{
      text-align: center;
      width: 25%;
    }
   
  }
}
</style>